<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <AddAddSearch>
          <template v-slot:right>
            <el-button
              type="primary"
              @click="addPermission('0', '1')"
            >添加权限</el-button>
          </template>
        </AddAddSearch>
        <el-table
          border
          style="width: 100%"
          :data="permissionList"
          row-key="id"
        >
          <el-table-column label="权限名称" width="180" prop="title" />
          <el-table-column label="权限标识" width="180" prop="code" />
          <el-table-column label="权限描述" width="180" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                v-if="row.type === '1'"
                type="primary"
                @click="addChildrenPermission(row.id,'2')"
              >添加子权限</el-button>
              <el-button @click="editPermission(row.id)">编辑</el-button>
              <el-button
                type="danger"
                @click="delPermission(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 弹窗 -->
      <el-dialog
        :visible="isShowDialog"
        width="70%"
        title="新增权限"
        @close="closeFn"
      >
        <el-form
          ref="form"
          label-width="120px"
          :model="formData"
          :rules="rules"
        >
          <el-form-item label="权限名称" prop="title">
            <el-input v-model="formData.title" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" />
          </el-form-item>

          <el-form-item label="开启">
            <!-- 设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。 -->
            <!-- 如果是双向绑定的变量 必须使用v-on 绑定 -->
            <el-switch
              v-model="formData.type"
              active-color="#13ce66"
              inactive-color="#eee"
              inactive-value="2"
              active-value="1"
            />
          </el-form-item>
        </el-form>
        <!-- 弹窗插槽 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="comfirm">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissionList, addPermission, delPermission, getDetailPermission, editePermission } from '@/api/permission'
import { listToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      permissionList: [],
      isShowDialog: false,
      formData: {
        title: '', // 标题
        code: '', // 标识
        description: '', // 描述
        pid: '', // 父权限 id 没有的话就是 0
        type: '1' // 层级类型 1 或者 2
      },
      rules: {
        title: [
          {
            required: true,
            message: '名称不能为空！',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '标识不能为空！',
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: '描述不能为空！',
            trigger: 'blur'
          }
        ]
      }

    }
  },
  created() {
    this.loadPermissionList()
  },
  methods: {
    async loadPermissionList() {
      const res = await getPermissionList()
      this.permissionList = listToTreeData(res.data, '0')
      console.log(523, this.permissionList)
    },
    addPermission(pid, type) {
      this.formData.pid = pid
      this.formData.type = type
      this.isShowDialog = true
    },
    closeFn() {
      this.$refs.form.resetFields()
      this.isShowDialog = false
    },
    async comfirm() {
      await this.$refs.form.validate()
      console.log(4852, this.formData)

      if (this.formData.id) {
        await editePermission(this.formData)
      } else {
        await addPermission(this.formData)
      }

      this.closeFn()

      this.loadPermissionList()
    },
    delPermission(id) {
      this.$confirm('是否删除', '删除', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await delPermission(id)
        this.loadPermissionList()
      }).catch(() => {
        console.log('用户取消了')
      })
    },
    addChildrenPermission(pid, type) {
      console.log('childrenPid', pid)

      this.formData.pid = pid.toString()
      this.formData.type = type
      this.isShowDialog = true
    },
    async editPermission(id) {
      this.isShowDialog = true
      const res = await getDetailPermission(id)
      console.log('res', res)
      this.formData = res.data
    }

  }
}
</script>

<style>
.ss {
  display: flex;
  justify-content: center;
}
</style>
